<template lang="html">
  <section class='infocase'>
	<top-list
		class='fiveoneline'
		:listData ="topListDate"
		@callBackTopList = "changeTopListDate"
		:iconList='iconArray'></top-list>
		<!-- 表单元素 -->
		<el-form class="selectArea" v-model='selectData' :inline='true' label-width='100px'>
			<el-form-item label='警情区域：'>
				<el-select
	 			 clearable placeholder="请选择"
	 			 v-model='selectData.areas'
				 size='mini'
	 		 >
	 			 <el-option v-for='item in selectOptions.areas'
	 				:label='item.name'
	 				:key='item.value'
	 				:value='item.value'
	 			 >
	 			 </el-option>
	 		 </el-select>
			</el-form-item>
			<el-form-item label='所属警区：'>
				<el-select
	 			 clearable placeholder="请选择"
	 			 v-model='selectData.police'
				 size='mini'
	 		 >
	 			 <el-option v-for='item in selectOptions.police'
	 				:label='item.name'
	 				:key='item.value'
	 				:value='item.value'
	 			 >
	 			 </el-option>
	 		 </el-select>
			</el-form-item>
			<el-form-item label='时间范围：'>
				<el-select
	 			 clearable placeholder="请选择"
	 			 v-model='selectData.timepick'
				 size='mini'
	 		 >
	 			 <el-option v-for='item in selectOptions.timepick'
	 				:label='item.name'
	 				:key='item.value'
	 				:value='item.value'
	 			 >
	 			 </el-option>
	 		 </el-select>
			</el-form-item>
			<el-form-item label='自定义时间：'>
        <el-date-picker
          v-model="selectData.timeRange[0]"
          align="right"
          type="date"
          size='mini'
          style='width:180px;'
          placeholder="开始日期"
          value-format='yyyy/MM/dd'
          @change = "handlerDatePickerChange"
          :picker-options='pickerBeginDateBefore'>
        </el-date-picker>
        <el-form-item label="至" label-width="40px">
          <el-date-picker
            v-model="selectData.timeRange[1]"
            align="right"
            type="date"
            size='mini'
            style='width:180px;'
            placeholder="结束日期"
            value-format='yyyy/MM/dd'
            @change = "handlerDatePickerChange"
            :picker-options='pickerBeginDateAfter'>
          </el-date-picker>
        </el-form-item>
				<!-- <el-date-picker
		      v-model="selectData.timeRange"
		      type="daterange"
		      range-separator="至"
					size='mini'
					value-format='yyyyMMdd'
					@change='handlerDatePickerChange'
		      start-placeholder="开始日期"
		      end-placeholder="结束日期">
		    </el-date-picker> -->
			</el-form-item>
		</el-form>
        <!-- 受表单元素控制的区域 -->
		 <div class="pie_area">
		 	<normal-bar class="normal_bar" title='案情类别' chartId='normalBar' :propdata='caseInfoData'></normal-bar>
		 	 <case-pie class="pieItem" title='区域发案情况' chartId='leftPie' :seriesData="casePieInfoData.series" :areaData="casePieInfoData.area"></case-pie>
		 </div>
		 <!-- 趋势柱状图 -->
		 <div class="pie_area">
		 	<line-bar class="line_bar100"  :optionData='oneDayData' chartId='lineBarOneDay'></line-bar>
		 </div>
		 <div class="pie_area">
		 	<line-bar class="line_bar100"  :optionData='oneMonthData' chartId='lineBarOneMonth'></line-bar>
		 </div>
		 <div class="pie_area_50">
		 	<line-bar class="line_bar100"  :optionData='oneYearData' chartId='lineBarOneYear'></line-bar>
		 	<line-bar class="line_bar100"  :optionData='fiveYearData' chartId='lineBarFiveYear' formatter='{a0} : {c0}<br/>{a1} : {c1}%'></line-bar>
		 </div>
  </section>
</template>

<script>
import topList from "@/components/common/listPanel.vue";
import casePie from "@/components/common/charts/casepie.vue";
import normalBar from "@/components/common/charts/normalBar.vue";
import lineBar from "@/components/common/charts/lineBar.vue";
import {
  apiPoliceInfo,
  apiPolicePieInfo,
  apiPoliceTrend,
  apipoliceTopList
} from "@/api/api";
export default {
  components: {
    topList,
    casePie,
    normalBar,
    lineBar
  },
  data() {
    return {
      /*这里传数据*/
      selectData: {
        areas: "",
        police: "",
        timepick: "",
        timeRange: ['','']
      },
      selectOptions: {
        areas: [],
        police: [],
        timepick: []
      },
      //顶部数据
      topListDate: [
        { name: "全市立案总数", value: 0 },
        { name: "江城区立案数", value: 0 },
        { name: "阳西县立案总数", value: 0 },
        { name: "阳东区立案总数", value: 0 },
        { name: "阳春县立案总数", value: 0 },
        { name: "当日全市立案数", value: 0 },
        { name: "当日江城区立案数", value: 0 },
        { name: "当日阳西县立案数", value: 0 },
        { name: "当日阳东区立案数", value: 0 },
        { name: "当日阳春县立案数", value: 0 }
      ],
      iconArray: [
        "allcity_history",
        "onecity_history",
        "twocity_history",
        "threecity_history",
        "fourcity_history",
        "allcity_today",
        "onecity_today",
        "twocity_today",
        "threecity_today",
        "fourcity_today"
      ],
      //警情类型数据
      caseInfoData: {
        xAxis: [],
        value: []
      },
      casePieInfoData: {
        series: [],
        area: []
      },
      oneDayData: {
        title: "日趋势分析",
        legend: {
          data: ["上一期", "本期", "同比增长", "环比增长"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1时",
              "2时",
              "3时",
              "4时",
              "5时",
              "6时",
              "7时",
              "8时",
              "9时",
              "10时",
              "11时",
              "12时",
              "13时",
              "14时",
              "15时",
              "16时",
              "17时",
              "18时",
              "19时",
              "20时",
              "21时",
              "22时",
              "23时",
              "24时"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量"
          },
          {
            type: "value",
            name: "增长率",
            interval: 50,
            axisLabel: {
              show: true,
              formatter: "{value}%"
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "上一期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(63, 153, 2)" },
                  { offset: 0.5, color: "rgb(78, 185, 4)" },
                  { offset: 1, color: "rgb(78, 191, 0)" }
                ])
              }
            },
            data: []
          },
          {
            name: "本期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(39,120,204)" },
                  { offset: 0.5, color: "rgb(89,134,227)" },
                  { offset: 1, color: "rgb(131,147,248)" }
                ])
              }
            },
            data: []
          },
          {
            name: "同比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(103,213,161)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          },
          {
            name: "环比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(140,152,259)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      oneMonthData: {
        title: "月趋势分析",
        legend: {
          data: ["上一期", "本期", "同比增长", "环比增长"]
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量"
          },
          {
            type: "value",
            name: "增长率",
            interval: 50,
            axisLabel: {
              show: true,
              formatter: "{value}%"
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "上一期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(63, 153, 2)" },
                  { offset: 0.5, color: "rgb(78, 185, 4)" },
                  { offset: 1, color: "rgb(78, 191, 0)" }
                ])
              }
            },
            data: []
          },
          {
            name: "本期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(39,120,204)" },
                  { offset: 0.5, color: "rgb(89,134,227)" },
                  { offset: 1, color: "rgb(131,147,248)" }
                ])
              }
            },
            data: []
          },
          {
            name: "同比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(103,213,161)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          },
          {
            name: "环比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(140,152,259)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      oneYearData: {
        title: "年趋势分析",
        legend: {
          data: ["上一期", "本期", "同比增长", "环比增长"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量"
          },
          {
            type: "value",
            name: "增长率",
            interval: 50,
            axisLabel: {
              show: true,
              formatter: "{value}%"
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "上一期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(63, 153, 2)" },
                  { offset: 0.5, color: "rgb(78, 185, 4)" },
                  { offset: 1, color: "rgb(78, 191, 0)" }
                ])
              }
            },
            data: []
          },
          {
            name: "本期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(39,120,204)" },
                  { offset: 0.5, color: "rgb(89,134,227)" },
                  { offset: 1, color: "rgb(131,147,248)" }
                ])
              }
            },
            data: []
          },
          {
            name: "同比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(103,213,161)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          },
          {
            name: "环比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(140,152,259)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      fiveYearData: {
        title: "五年趋势分析",
        legend: {
          data: ["年份", "环比增长"]
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量"
          },
          {
            type: "value",
            name: "增长率",
            interval: 50,
            axisLabel: {
              show: true,
              formatter: "{value}%"
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "年份",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(39,120,204)" },
                  { offset: 0.5, color: "rgb(89,134,227)" },
                  { offset: 1, color: "rgb(131,147,248)" }
                ])
              }
            },
            data: []
          },
          {
            name: "环比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(140,152,259)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      pickerBeginDateBefore:{
				disabledDate: (time) => {
          let date = this.selectData.timeRange[1];
					let beginDateVal = new Date(date).getTime();
					if (beginDateVal) {
						return time.getTime() > beginDateVal;
					}
				}
			},
			pickerBeginDateAfter:{
				disabledDate: (time) => {
          let date = this.selectData.timeRange[0];
          let beginDateVal = new Date(date).getTime();
					if (beginDateVal) {
						return time.getTime() < beginDateVal;
					}
				}
			}
    };
  },
  methods: {
    //时间范围选择
    handlerDatePickerChange() {
	    let val = this.selectData.timeRange;
      this.getCaseInfoData(val[0], val[1]);
      this.getCasePieInfoData(val[0], val[1]);
    },
    //顶部时间选择
    changeTopListDate(date) {
      let _date = date.replace(/-/g, "");
      this.getCaseHour(_date);
      this.getCaseDay(_date);
      this.getCaseMonth(_date);
      this.getCase5year(_date);
      this.getTopListData(_date);
    },
    //顶部数据读取
    getTopListData(date) {
      apipoliceTopList(date).then(res => {
        let resData = res.data;
        let hisAll, dayAll;
        //清空为0
        this.topListDate.forEach(elem => {
          elem.value = 0;
        });
        hisAll = resData.month
          .map((elem, index) => {
            switch (elem.deptName) {
              case "江城区":
                this.topListDate[1].value = elem.num;
                break;
              case "阳西县":
                this.topListDate[2].value = elem.num;
                break;
              case "阳东县":
                this.topListDate[3].value = elem.num;
                break;
              case "阳春市":
                this.topListDate[4].value = elem.num;
                break;
              default:
                console.log("false");
            }
            return elem.num;
          })
          .reduce((a, b) => a + b);
        this.topListDate[0].value = hisAll;
        if (resData.day.length == 0) {
          dayAll = 0;
        } else {
          dayAll = resData.day
            .map((elem, index) => {
              switch (elem.deptName) {
                case "江城区":
                  this.topListDate[6].value = elem.num;
                  break;
                case "阳西县":
                  this.topListDate[7].value = elem.num;
                  break;
                case "阳东县":
                  this.topListDate[8].value = elem.num;
                  break;
                case "阳春市":
                  this.topListDate[9].value = elem.num;
                  break;
                default:
                  console.log("false");
              }
              return elem.num;
            })
            .reduce((a, b) => a + b);
        }
        this.topListDate[5].value = dayAll;
      });
    },
    //案情分析
    getCaseInfoData(startDate, endDate) {
      apiPoliceInfo(startDate, endDate).then(res => {
        let resData = res.data;
        this.caseInfoData.xAxis.length = 0;
        this.caseInfoData.value.length = 0;
        resData.forEach(elem => {
          this.caseInfoData.xAxis.push(elem.dmmc);
          this.caseInfoData.value.push(elem.AJSL);
        });
      });
    },
    getCasePieInfoData(startTime, endTime) {
      apiPolicePieInfo(startTime, endTime).then(res => {
        let resData = res.data;
        this.casePieInfoData.series.length = 0;
        this.casePieInfoData.area.length = 0;
        resData.forEach(elem => {
          this.casePieInfoData.series.push(elem);
          this.casePieInfoData.area.push(elem.name);
        });
      });
    },
    //趋势接口
    getCaseHour(date) {
      apiPoliceTrend(date, "Hour").then(res => {
        let resData = res.data;
        let _per;
        this.oneDayData.series[0].data.length = 0;
        this.oneDayData.series[1].data.length = 0;
        this.oneDayData.series[2].data.length = 0;
        this.oneDayData.series[3].data.length = 0;
        resData[1].result.forEach((elem, index) => {
          //上一期
          this.oneDayData.series[0].data.push(elem.sum);
          //本期
          this.oneDayData.series[1].data.push(resData[0].result[index].sum);
          //同比
          _per = Number.isFinite(
            (resData[0].result[index].sum - elem.sum) * 100 / elem.sum
          );
          if (_per) {
            this.oneDayData.series[2].data.push(
              (
                (resData[0].result[index].sum - elem.sum) *
                100 /
                elem.sum
              ).toFixed(2)
            );
          } else if (resData[0].result[index].sum == 0 && elem.sum == 0) {
            this.oneDayData.series[2].data.push(0);
          } else {
            this.oneDayData.series[2].data.push(100);
          }
          //环比

          if (index == 0) {
            if (resData[1].result[23].sum == 0) {
              this.oneDayData.series[3].data.push(100);
            } else {
              this.oneDayData.series[3].data.push(
                (
                  (resData[0].result[1].sum - resData[1].result[23].sum) *
                  100 /
                  resData[1].result[23].sum
                ).toFixed(2)
              );
            }
          } else {
            _per = Number.isFinite(
              (resData[0].result[index].sum -
                resData[0].result[index - 1].sum) *
                100 /
                resData[0].result[index - 1].sum
            );
            if (_per) {
              this.oneDayData.series[3].data.push(
                (
                  (resData[0].result[index].sum -
                    resData[0].result[index - 1].sum) *
                  100 /
                  resData[0].result[index - 1].sum
                ).toFixed(2)
              );
            } else if (
              resData[0].result[index].sum == 0 &&
              resData[0].result[index - 1].sum == 0
            ) {
              this.oneDayData.series[3].data.push(0);
            } else {
              this.oneDayData.series[3].data.push(100);
            }
          }
        });
      });
    },
    getCaseDay(date) {
      apiPoliceTrend(date, "Day").then(res => {
        this.oneMonthData.series[0].data.length = 0;
        this.oneMonthData.series[1].data.length = 0;
        this.oneMonthData.series[2].data.length = 0;
        this.oneMonthData.series[3].data.length = 0;
        this.oneMonthData.xAxis[0].data.length = 0;
        let resData = res.data;
        let length = resData[1].result.length - 1,
          _length = resData[0].result.length - 1;
        let _per;
        if (!resData[1].result[_length]) {
          resData[1].result[_length] = { sum: 0 };
        }
        resData[0].result.forEach((elem, index) => {
          //日期
          this.oneMonthData.xAxis[0].data.push(elem.month);
          //本期
          this.oneMonthData.series[1].data.push(elem.sum);
          //上一期
          this.oneMonthData.series[0].data.push(resData[1].result[index].sum);
          //同比
          _per = Number.isFinite(
            (elem.sum - resData[1].result[index].sum) *
              100 /
              resData[1].result[index].sum
          );
          if (_per) {
            this.oneMonthData.series[2].data.push(
              (
                (elem.sum - resData[1].result[index].sum) *
                100 /
                resData[1].result[index].sum
              ).toFixed(2)
            );
          } else if (elem.sum == 0 && resData[1].result[index].sum == 0) {
            this.oneMonthData.series[2].data.push(0);
          } else {
            this.oneMonthData.series[2].data.push(100);
          }
          //环比
          if (index == 0) {
            this.oneMonthData.series[3].data.push(
              (
                (resData[0].result[0].sum - resData[1].result[length].sum) *
                100 /
                resData[1].result[length].sum
              ).toFixed(2)
            );
          } else {
            _per = Number.isFinite(
              (resData[0].result[index].sum -
                resData[0].result[index - 1].sum) *
                100 /
                resData[0].result[index - 1].sum
            );
            if (_per) {
              this.oneMonthData.series[3].data.push(
                (
                  (resData[0].result[index].sum -
                    resData[0].result[index - 1].sum) *
                  100 /
                  resData[0].result[index - 1].sum
                ).toFixed(2)
              );
            } else if (
              resData[0].result[index].sum == 0 &&
              resData[0].result[index - 1].sum == 0
            ) {
              this.oneMonthData.series[3].data.push(0);
            } else {
              this.oneMonthData.series[3].data.push(100);
            }
          }
        });
      });
    },
    getCaseMonth(date) {
      apiPoliceTrend(date, "Month").then(res => {
        let resData = res.data;
        let _per;
        this.oneYearData.series[0].data.length = 0;
        this.oneYearData.series[1].data.length = 0;
        this.oneYearData.series[2].data.length = 0;
        this.oneYearData.series[3].data.length = 0;
        resData[0].result.forEach((elem, index) => {
          //本期
          this.oneYearData.series[1].data.push(elem.sum);
          //上一期
          this.oneYearData.series[0].data.push(resData[1].result[index].sum);
          // 同比
          _per = Number.isFinite(
            (elem.sum - resData[1].result[index].sum) *
              100 /
              resData[1].result[index].sum
          );
          if (_per) {
            this.oneYearData.series[2].data.push(
              (
                (elem.sum - resData[1].result[index].sum) *
                100 /
                resData[1].result[index].sum
              ).toFixed(2)
            );
          } else if (elem.sum == 0 && resData[1].result[index].sum == 0) {
            this.oneYearData.series[2].data.push(0);
          } else {
            this.oneYearData.series[2].data.push(100);
          }
          //环比

          if (index == 0) {
            this.oneYearData.series[3].data.push(
              (
                (resData[0].result[0].sum - resData[1].result[11].sum) *
                100 /
                resData[1].result[11].sum
              ).toFixed(2)
            );
          } else {
            _per = Number.isFinite(
              (resData[0].result[index].sum -
                resData[0].result[index - 1].sum) *
                100 /
                resData[0].result[index - 1].sum
            );
            if (_per) {
              this.oneYearData.series[3].data.push(
                (
                  (resData[0].result[index].sum -
                    resData[0].result[index - 1].sum) *
                  100 /
                  resData[0].result[index - 1].sum
                ).toFixed(2)
              );
            } else if (
              resData[0].result[index].sum == 0 &&
              resData[0].result[index - 1].sum == 0
            ) {
              this.oneYearData.series[3].data.push(0);
            } else {
              this.oneYearData.series[3].data.push(100);
            }
          }
        });
      });
    },
    getCase5year(date) {
      apiPoliceTrend(date, "Year").then(res => {
        let resData = res.data;
        this.fiveYearData.xAxis[0].data.length = 0;
        this.fiveYearData.series[0].data.length = 0;
        this.fiveYearData.series[1].data.length = 0;
        for (let i = 0; i < 5; i++) {
          this.fiveYearData.xAxis[0].data.unshift(resData[i].year);
          //年份数据
          this.fiveYearData.series[0].data.unshift(resData[i].sum);
          //环比
          this.fiveYearData.series[1].data.unshift(
            (
              (resData[i].sum - resData[i + 1].sum) *
              100 /
              resData[i + 1].sum
            ).toFixed(2)
          );
        }
      });
    }
  },
  created() {
    let startDate = new Date()._toDate0String().replace(/\d{2}$/, "01"), //月初
      endDate = new Date()._toDate0String(), //今天
      startTime = new Date()._toDate0String() + "00", //今天00
      endTime = new Date()._toDate0String() + "24"; //今天24
    let stringDate = new Date(new Date() - 86400000)._toDateString();
    //顶部数据
    // this.changeTopListDate(stringDate)
    //柱状图和饼状图
    this.getCaseInfoData(startDate, endDate);
    this.getCasePieInfoData(startDate, endDate);
    //趋势
    this.getCaseHour(endDate);
    this.getCaseDay(endDate);
    this.getCaseMonth(endDate);
    this.getCase5year(endDate);
    this.getTopListData(endDate);
  }
};
</script>

<style lang="scss">
.fiveoneline {
  .container {
    .item {
      width: 19% !important;
    }
  }
}
.infocase {
  width: 94%;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 6px;
  .pie_area {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 400px;
    margin-bottom: 30px;
    .pieItem {
      float: right;
      width: 32%;
    }
    .line_bar100 {
      width: 100%;
      margin: 0 auto;
    }
    .normal_bar {
      width: 65%;
    }
  }
  .pie_area_50 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    .line_bar100 {
      width: 48%;
    }
  }
}
.selectArea {
  width: 100%;
}
</style>
